import React from 'react'
import {
    View,
    StyleSheet,
    Text,
    FlatList,
    TouchableWithoutFeedback
} from 'react-native'

export default class CommunityTagCell extends React.PureComponent {

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.clickCellAction}>
                <View style={styles.container}>
                    <FlatList 
                        data={this.props.data.tag}
                        renderItem={this.renderItem}
                        keyExtractor={this.keyExtractor}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    />
                </View>
            </TouchableWithoutFeedback>
        )
    }

    renderItem = ({item}) => {
        return (
            <View style={styles.item}>
                <Text style={[styles.itemText, {color:item.color, borderColor:item.color}]}>{item.content}</Text>
            </View>
        )
    }

    keyExtractor = (item, index) => '' + index;

    clickCellAction = () => {
        this.props.clickCellAction(this.props.data)
    }
}

const styles = StyleSheet.create({
    container:{

    },
    item:{
        height:30,
        justifyContent:'center',
        alignItems:'center',
        marginLeft:10,
    },
    itemText:{
        fontSize:11,
        borderRadius:4,
        borderWidth:1,
        padding:3,
    }
})